<template>
  <div class="login-background">
    <div class="login-container">
      <h2>员工登录</h2>
      <form @submit.prevent="handleLogin">
        <div class="form-item">
          <label for="email">邮箱</label>
          <input 
            type="email" 
            id="email" 
            v-model="email" 
            placeholder="请输入邮箱" 
            required 
          />
        </div>

        <div class="form-item">
          <label for="password">密码</label>
          <input 
            type="password" 
            id="password" 
            v-model="password" 
            placeholder="请输入密码" 
            required 
          />
        </div>

        <button type="submit" :disabled="isSubmitting">
          登录
        </button>
      </form>
    </div>
  </div>
</template>

  
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import apiClient from '../../api/api';
import { useAuthStore } from '../../stores/auth.js';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';  // 引入 ElementPlus 的 ElMessage

const store = useAuthStore();
const router = useRouter();

// 表单数据
const email = ref('');
const password = ref('');
const isSubmitting = ref(false);

// 邮箱格式验证函数
const validateEmail = (email) => {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return emailRegex.test(email);
};

// 登录函数
const handleLogin = async () => {
  // 清空错误信息
  isSubmitting.value = true;

  // 邮箱格式验证
  if (!email.value) {
    ElMessage.error('邮箱不能为空');
    isSubmitting.value = false;
    return;
  } else if (!validateEmail(email.value)) {
    ElMessage.error('请输入有效的邮箱地址');
    isSubmitting.value = false;
    return;
  }

  if (!password.value) {
    ElMessage.error('密码不能为空');
    isSubmitting.value = false;
    return;
  }

  try {
    const res = await apiClient.post('oaauth/login/', { 
      email: email.value, 
      password: password.value 
    });
    let data = res.data;
    let user = data.user;
    let access_token = data.access_token; 
    console.log(access_token);
    store.setUserToken(user, access_token); // 使用pinia 存储user和token到localStorage
    console.log(store.user); // 打印存储的user信息
    console.log(store.token); // 打印存储的token信息

    // 登录成功的提示
    ElMessage.success('登录成功');
    router.push('/'); // 跳转到首页 
  } catch (err) {
    // 错误处理
    console.log(err);
    let detail = err.response?.data?.detail || '未知错误';
    ElMessage.error(detail);  // 使用 ElementPlus 显示错误提示
  } finally {
    isSubmitting.value = false; // 请求结束，关闭提交状态
  }
};
</script>

  <style scoped>
  /* 背景样式 */
  .login-background {
    background: linear-gradient(135deg, #6b4fdb, #4e7db7); /* 渐变背景 */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* 登录容器 */
  .login-container {
    background-color: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
  }
  
  /* 标题样式 */
  h2 {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 30px;
  }
  
  /* 表单项 */
  .form-item {
    margin-bottom: 20px;
  }
  
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
  }
  
  input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s;
  }
  
  input:focus {
    border-color: #6b4fdb;
    outline: none;
  }
  
  /* 错误消息 */
  .error-message {
    color: red;
    font-size: 14px;
    margin-top: 5px;
  }
  
  /* 按钮样式 */
  button {
    width: 100%;
    padding: 12px;
    background-color: #6b4fdb;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  button:disabled {
    background-color: #aaa;
  }
  
  button:hover:not(:disabled) {
    background-color: #5a3fcb;
  }
  
  /* 响应式设计：手机端 */
  @media (max-width: 480px) {
    .login-container {
      padding: 20px;
    }
  }
  </style>
  